import React, { Component, useEffect } from 'react'
import { Select, Input, Button, Table, Space, Modal, Form, Popconfirm, message } from 'antd'
import { 
  AppstoreOutlined, 
  PlusOutlined, 
  UnorderedListOutlined, 
  ToTopOutlined, 
  CloudDownloadOutlined 
} from '@ant-design/icons'
import { getUserslist, addUser, editUser, deleteUser} from '../../api/userslist'


const { Option } = Select
const { Search } = Input

let headerLiStyle = {
  border: '2px solid rgba(215, 215, 215, 1)',
  marginRight: 20
}

// 自定义一个添加用户信息的组件，及组件下挂载的属性
const CollectionCreateForm = ({
  visible,
  onCreate,
  onCancel,
  currentEdit,
  isEdit
}) => {

  const [form] = Form.useForm() //使用 Hook 创建一个表单 Form 高阶组件，赋值给 form 实例

  // useEffect 是一个 HOOK，参数1是一个函数参数，参数2是函数执行的条件（currentEdit, form改变）参数1函数执行，相当于 class 组件中的 componentDidMount()/componentDidUpdate()/componentWillUnmount()
  useEffect(() => {
    // form实例下挂载的方法
    form.setFieldsValue(currentEdit)
  }, [currentEdit, form])

/*   this.onChange = e => {
    console.log('radio checked', e.target.value)
    this.setState({
      value: e.target.value,
    })
  } */

  //  直接返回一个对话框组件
  return (
    <Modal
      visible={visible}
      title={isEdit ? '编辑用户信息' : '添加用户信息'}
      okText={isEdit ? '编辑' : '添加'}
      cancelText="取消"
      forceRender
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then(values => {
            onCreate(values)
          })
          .catch(info => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form
        form={form} // 使用 form 引用，Form 高阶组件
        layout="vertical"
        name="form_in_modal"
      >
        <Form.Item
          name="id"
          label="序号"
          hidden
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="phone"
          label="用户名(手机号）"
          rules={[{ required: true, message: '必须填写用户名' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="name"
          label="姓名"
          rules={[{ required: true, message: '必须填写姓名' }]}
        >
          <Input />
        </Form.Item>
      {/*   <Form.Item
          name="sex"
          label="性别"
        >
          <Radio.Group onChange={this.onChange} value={this.state.value}>
            <Radio value={1}>男</Radio>
            <Radio value={2}>女</Radio>
          </Radio.Group>
        </Form.Item> */}
        <Form.Item
          name="worknumber"
          label="工作编号"
        >
          <Input />
        </Form.Item>
        {/* <Form.Item
          name="QQnumber"
          label="QQ"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
        >
          <Input />
        </Form.Item> */}
        <Form.Item
          name="section"
          label="部门"
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="job"
          label="职位"
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  )
}

// 默认表单中填写的用户数据
const defaultUserslist = {
  id: null,
  name: null,
  username: null,
  email: null,
  phone: null,
  worknumber:null,
  job:null,
  section:null,
  QQnumber:null,
  sex: null
}

// 定义名为 Userslist 的 class 组件，并导出组件
export default class Userslist extends Component {
  state = {
    users: [],
    editFormVisible: false, // 点击编辑时，编辑对话框默认设置为 false
    currentEdit: {}, // 编辑当前页面时默认为空对象
    isEdit: false,  // 默认当前不编辑
    value:1
  }

  // 定义表格的第一行中的各类属性（此时 columns 作为组件的属性使用）
  columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '用户名（手机号）',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '工作编号',
      dataIndex: 'worknumber',
      key: 'worknumber',
    },
    {
      title: '部门',
      key: 'section',
      dataIndex: 'section'
    },
    {
      title: '职位',
      key: 'job',
      dataIndex: 'job'
    },
    {
      title: '时间',
      key: 'date',
      dataIndex: 'date'
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (  // record 渲染表格每一行的用户对象
        <Space size="middle">
          <a href="/" onClick={e => {
            e.preventDefault()
            this.setVisible(true)
            this.setState({
              currentEdit: record, //将每行用户对象的数据渲染到相应的当前编辑框
              // isEdit: false
            })
          }}>查看详情</a>
          <a href="/" onClick={e => {
            e.preventDefault()
            this.setVisible(true)
            this.setState({
              currentEdit: record,
              isEdit: true
            })
          }}>编辑</a>
          <Popconfirm
            title="是否确认删除？"
            onConfirm={() => this.confirm(record)}
            onCancel={this.cancel}
            okText="确定"
            cancelText="取消"
          >
            <a href="/">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  // 每行单选，全选功能
  state = {
    selectedRowKeys: [], // Check here to configure the default column
    loading: false,
  }

  // 组件挂载后， ajax 请求用户的数据
  componentDidMount() {
    getUserslist().then(res => {
      this.setState({
        userslist: res.body.userslist
      })
    })
  }

  // 选中功能
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  // 在筛选列表中 改变筛选条件 可执行的事件  --- 暂时没有写到
  // handleChange = value => {
  //   console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
  // }

  // 点击确定按钮时的回调函数（执行操作）
  onCreate = values => {
    console.log('Received values of form: ', values)
    if (this.state.isEdit) { // 修改
      editUser(values).then(res => {
        console.log('修改响应：', res)
        console.log(res.body.userslist)

        const users = res.body.userslist.map(users => {

          // console.log(users.id)  这里存在问题
          return users
        })
  // 将修改成功的用户信息替换掉 state 中 users 数组对应的用户
    const newUserslist = this.state.userslist.map(userinfo => {
      // 存在问题
      console.log(userinfo.id)
      if (userinfo.id === users.id) {
      return {
        ...userinfo,
        ...users
      }
    }
      return userinfo
  })
  this.setState({
    userslist: newUserslist
  })

  // 修改成功，则关闭对话框
  this.setVisible(false)
      }).catch(e => console.log('修改异常：', e))
    } else { // 添加
      addUser(values).then(res => {
        console.log(res)
        // 将添加成功的用户信息保存到 users 数组中
        const newUserslist = [
          res,
          ...this.state.userslist
        ]
        this.setState({
          users: newUserslist
        })

        // 添加成功，则关闭对话框
        this.setVisible(false)
      }).catch(e => console.log('添加异常：', e))
    }
  }

// 调用函数setVisible 设置编辑对话框可见
  setVisible = visible => {
    this.setState({
      editFormVisible: visible
    })
  }


  /**
   * 确定删除
   */
  confirm = userinfo => {
    deleteUser(userinfo).then(res => {
      console.log(res)
      // 删除成功，将当前删除行从表格中移除
      const newUsers = this.state.users.filter(user => user.id !== userinfo.id)
      this.setState({
        users: newUsers
      })
      // 提示删除成功
      message.success('删除成功');
    }).catch(e => console.log('删除异常：', e))
  }

  /**
   * 取消删除
   */
  cancel = e => {
    console.log(e);
    message.error('Click on No');
  }

  render() {
    const { loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    }
    const hasSelected = selectedRowKeys.length > 0

    return (
      <>
      <h2 style={{ fontSize: 25, fontWeight: 800 }}>用户管理</h2>
        <div className="users-list" style={{/*  height: 100, */ background:'rgba(242, 242, 242, 1)' }}>
        <h3 style={{ fontSize: 26, fontWeight: 400, border:'2px solid rgba(215, 215, 215, 1)', paddingLeft:15 }} > 
          {<AppstoreOutlined />}筛选</h3>
        <ul className="users-list-search" style={{ display:'flex',listStyle:'none'}}>
          <li style={{ marginRight: 20 }}>
            <Select
              labelInValue
              defaultValue={{ value: '选择部门' }}
              style={{ width: 120 }}
              onChange={this.handleChange} //改变筛选列表条件可调用的函数-还未写
            >
              <Option value="销售部">销售部</Option>
              <Option value="市场部">市场部</Option>
            </Select>
          </li>
          <li style={{ marginRight: 20 }}>
            <Select
              labelInValue
              defaultValue={{ value: '选择大区' }}
              style={{ width: 120 }}
              onChange={this.handleChange}
            >
              <Option value="华南区">华南区</Option>
              <Option value="华北区">华北区</Option>
            </Select>
          </li>
          <li style={{ marginRight: 20 }}>
            <Select
              labelInValue
              defaultValue={{ value: '选择地区' }}
              style={{ width: 120 }}
              onChange={this.handleChange}
            >
              <Option value="北上广">北上广</Option>
              <Option value="京津冀">京津冀</Option>
            </Select>
          </li>
          <li style={{ marginRight: 20 }}>
            <Select
              labelInValue
              defaultValue={{ value: '选择职务' }}
              style={{ width: 120 }}
              onChange={this.handleChange}
            >
              <Option value="市场经理">市场经理</Option>
              <Option value="产品经理">产品经理</Option>
            </Select>
          </li>
          <li>
            <Search
              placeholder="输入手机号或姓名"
              onSearch={value => console.log(value)}
              enterButton="搜索"
              style={{ width: 200 }}
            />
          </li>
        </ul>
      </div>

      {/* 用户管理表头部分  */}
        <div className="users-list-header" style={{ fontSize: 25, fontWeight: 400, border: '2px solid rgba(215, 215, 215, 1)', paddingLeft: 15, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'rgba(242, 242, 242, 1)', flexWrap:'wrap' }}>
          <h4 style={{ fontSize: 20 }}> {<UnorderedListOutlined />}用户列表</h4>
          <ul style={{ display: 'flex', listStyle: 'none', fontSize: 18, marginTop:10 }}>
            <Button type="primary" style={headerLiStyle} onClick={() => {
              this.setVisible(true)
              this.setState({
                isEdit: false,
                currentEdit: defaultUserslist
              })
            }}>
              {<PlusOutlined /> }添加
            </Button>
            <Button style={headerLiStyle}>
              {<CloudDownloadOutlined /> }导入
            </Button>
            <Button style={headerLiStyle}>{<ToTopOutlined />}导出</Button>
            <Button style={headerLiStyle}>修改职务</Button>
            <Button style={headerLiStyle}>修改部门</Button>
            <Button style={headerLiStyle}>停用用户</Button>
            <Button style={headerLiStyle}>冻结用户</Button>
          </ul>
      </div>

        {/* 用户管理表格内容 */}
        <div className="users-list-main">
          <div>
            <Table 
              rowSelection={rowSelection} 
              columns={this.columns} 
              dataSource={this.state.userslist}
              rowKey="id"
              pagination={{
                pageSize: 10,
                total: 60
              }}
               />
            <div style={{ marginBottom: 16 }}>
              <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
                批量删除
              </Button>
            </div>
          </div>
        </div>
            
        {/* 使用添加用户信息的自定义组件 */}
        <CollectionCreateForm
          visible={this.state.editFormVisible}
          onCreate={this.onCreate}
          onCancel={() => {
            this.setVisible(false)
          }}
          //组件传值将 Userslist 的currentEdit属性传递 CollectionCreateForm 组件
          currentEdit={this.state.currentEdit} 
          isEdit={this.state.isEdit}
        />
      </>
    )
  } 
}

